<div class="container">
  <div class="justify">
    <i>1</i>
    <i>2</i>
    <i>3</i>
    <i>4</i>
    <i>5</i>
  </div>
</div>


<!-- text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。
text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。

text-align:justify 表示文字向两侧对齐。

虽然 text-align:justify 属性是全兼容的，但是要使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用。

-->
<style>
  .container {
    width: 400px;
    margin: 50px auto 0;
    background: #ddd;
  }

  .justify {
    position: relative;
    width: 100%;
    height: 24px;
    text-align: justify;
    margin-bottom: 20px;
    /*  不用伪元素的话，一定要加这一个属性才能均匀分布 */
    /* text-align-last: justify; */
  }

  /* 原因在于 justify 只有在存在第二行的情况下，第一行才两端对齐，所以在这里，我们需要制造一个假的第二行，而 :after 伪元素正好再适合不过。

最终实现题目初始所示： */
  .justify::after {
    content: "";
    display: inline-block;
    position: relative;
    top: -28px;
    *top: -9px;
    height: 1px;
    line-height: 0;
    width: 100%;
    background: #333;
    z-index: -1;
    *zoom: 1;
  }

  .justify i {

    width: 24px;
    line-height: 24px;
    display: inline-block;
    text-align: center;
    background: #333;
    color: white;
    border-radius: 50%;
    overflow: hidden;
    font-style: normal;

  }
</style>